@center:center;
@color:#333;
@width: 100%;
@height: 100%;
@block: block;
@flex: flex;
@left: left;
@relative:relative;
*{
	padding: 0;
	margin: 0;
	box-sizing:border-box;
	color:#a6a6a6;
	list-style: none;
	text-decoration: none;
}
html{
	background:@color;
}
header{
	height: 100px;
	width: @width;
	background: url(../images/header.png) no-repeat;
	background-size:100% 100%;
	box-shadow:0 2px 15px orangered;
	h1{
		text-align: @center;
	}
}
.blog{
	text-shadow: 5px 2px #fff;
	line-height: 100px;
	color: #000;
}
.navcont,.main-cont{
	width: @width - 20%;
	margin:50px auto;
}
.navcont{
	height: 250px;

}
.navpic{
	height: @height;
	width: @width - 40%;
	float: @left;
	img{
	height: @height;
	width: @width;
	&:hover{
	transform: rotateX(360deg);
	transition: all 4s;
  }
 }
}
.navbar{
	height: @height;
	width:@width - 62%;
	float: @left;
	margin-left: 2%;
	background:#2a2a2a;
	border-radius: 5%;
	padding:1%;
	box-shadow: 2px 2px 5px #333;
	 h2{
	color: #fff;
  }
}
.card{
	color: #d4d0c8;
	margin-left: 5%;
	 p{
	line-height: 2em;
  }
}
.nav-butt{
	height: @height - 75%;
	width: @width;
	display: @flex;
	justify-content: space-around;
	div{
	height: @height;
	width: @width - 84%;
	border-radius: 50%;
	text-align: @center;
	line-height: 100%;
	box-shadow: 0px 1px 3px #555 ,-0px -1px 3px #111 ;
	&:hover i{
	transform: rotateY(360deg);
	transition: all 1s;
    }
	a{
	height: @height;
	width: @width;
	line-height: 100%;
	font-size: 14px;
   }
  }
}
#font,#font1,#font2,#font3{
	display: @block;
	font-size: 20px;
	line-height: 100%;
	padding-top:10px;
	padding-bottom: 2px;
}
#font{
	color: red;
}
#font1{
	color: #2020d8;
}
#font2{
	color: #00d800;
}
#font3{
	color: #fefe00;
}
.main-left{
	width: @width - 32%;
	float: @left;
	padding-right: 2%;
	border-right:1px solid #222;
}
.arts{
	width: @width;
	background:#181818;
	padding:1px;
	margin-bottom: 50px;
}
.arts-cont{
	 background:#222222;
	 width: @width;
	 height: 85%;
}
.art-title{
	font-weight: normal;
	padding:1% 2% ;
    text-align: @center;
}
.art-cont{
	height: @height - 30%;
	width: @width;
}
.art-pic,.art{
	padding:1% 2%;
}
.art-pic{
	width:@width - 20%;
	margin: 0 auto;
	img{
	display: block;
	width: @width;
	padding-bottom: 4%;
    }
    a{
	display: @block;
	height: @height - 25%;
	width: @width;
	&:hover::after{
	content: '';
	display: @block;
	height: @height;
	width: @width;
	background: rgba(0,0,0,0.5);
	position:@relative;
	top:-105%;
	left: 0;
    }
  }
}
.art{
	width: @width;
	height: @height;
	p{
		padding: 0 3% 4%;
		text-indent: 42px;
	}
}
.main-right{
	width: @width - 70%;
	float: right;
	margin-left: 2%;
	li:hover{
	transform: translateX(5%);
	transition: all 1s;
  }
}
.reco-art,.gen-art,.music{
	width: @width;
	background:#222222;
	padding:2%;
	border:1px solid #181818;
	margin-bottom: 5%;
	overflow: hidden;
}
.reco-art h3,.gen-art h3{
	font-weight: normal;
	padding:2%;
	color: #498724;
}
.gen-art h3{
	color:#d8d800;
}
.reco-art a,.gen-art a{
	font-size: 14px;
	line-height: 2em;
	padding-left: 1%;
}

.gen-art ul{
	text-align: center;
}
.music img,.music audio{
	width: @width;
	height: @height;
}
.footer{
	width: @width;
	background:#222;
	display: @flex;
}
.f-cont{
	width: @width - 25%;
	margin:2% auto;
	display: @flex;
	justify-content: space-around;
	h3{
	margin-bottom: 5%;
  }
}
.photos{
	display: @flex;
	flex-direction: column;
	height: 100%;width: 60%;
}
.col{
	display: @flex;
	justify-content: space-around;
	div{
	width: @width;
	img{
	width: @width - 10%;
	margin-bottom:3%;
	border-radius: 5%;
    }
  }
    a{
	height: @height;
	width: @width;
	display: @block;
	&:hover::after{
	content: '';
	display: @block;
	height: @height - 6%;
	width: @width - 10%;
	background: rgba(0,0,0,0.5);
	border-radius: 5%;
	position:@relative;
	top:-100%;
	left: 0;
    }
  }
}
.copy{
	width: @width;
	background:#111;
	a{  
		display: @block;
		text-align: @center;
	    line-height: 50px;
	}
}